<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./template/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<ui:define name="conteudo">
		<h:form>
			<div style="float: left;">
				<p:fieldset legend="Categorias">
					<p:dataTable var="u" value="#{prateleiraBEAN.categorias}"
						binding="#{prateleiraBEAN.datatable}">
						<p:column>
							<h:commandLink action="#{prateleiraBEAN.listarLivros()}">
								<h:outputText value="#{u.descricao}" />
							</h:commandLink>
						</p:column>
					</p:dataTable>
				</p:fieldset>
			</div>
			<div>
				<p:fieldset legend="Prateleira">
					<p:dataGrid var="livro" value="#{prateleiraBEAN.livros}"
						columns="3" rows="12" paginator="true" paginatorPosition="bottom"
						binding="#{prateleiraBEAN.datagrid}">
						<p:column style="height: 200px;">
							<p:panel header="#{livro.nome}" style="text-align:center">
								<h:outputText value="Idioma: #{livro.idioma}" />
								<br />
								<h:outputText value="Ano: #{livro.ano}" id="dt" > 
									<f:convertDateTime for="dt" dateStyle="short" type="date" pattern="dd/MM/yyyy" />
								</h:outputText>
								<br />
								
								<h:commandLink value="+ Detalhe"
									action="./detalheLivro.xhtml?faces-redirect=true">
									<f:setPropertyActionListener target="#{detalheLivroBEAN.livro}"
										value="#{livro}" />
								</h:commandLink>
								<br />
								<p:commandButton value="Add ao pedido"
									action="#{prateleiraBEAN.adicionarLivro()}" ajax="false" />
							</p:panel>
						</p:column>
					</p:dataGrid>
				</p:fieldset>
			</div>
		</h:form>
		<h:form>
			<p:growl id="msg" globalOnly="true" showDetail="true"/>
		</h:form>
	</ui:define>
</ui:composition>
